@import (once) "vars";
@import (once) "utility";

//浮動佈局
//清除浮動
.clearfix {
  *zoom:1;

  &:before,
  &:after {
    display: table;
    font-size: 0;
    content: " ";
    clear: both;
  }
}

//生成一個公共的垂直/水平彈性盒子，然後其他垂直盒子extend它
.y-flex {
  #utility .y-flex();
}
.x-flex {
  #utility .x-flex();
}

//生成各种flex系数
.flex-loop(@i:1,@max:10) when (@i <= @max){
  .flex-@{i}{
    #utility .flex(@i);
  }
  .flex-loop(@i + 1);
}

.flex-loop;

//flex佈局模塊
//子內容左右貼邊
.flex-section {
  &:extend(.x-flex all);

  .flex-module-item(){
    &:extend(.y-flex all);
  }
  //左右貼標佈局模塊中彈性元素
  .flex{
    #utility .flex;
    .flex-module-item;
  }
  //左右貼標佈局模塊中貼邊元素
  .flex-bound{
    .flex-module-item;
  }
}

//使用浮動佈局的貼邊佈局
.float-section{
  &:extend(.clearfix all);
}

.float-end{
  float:right;
}

.float-start{
  float:left;
}

.float-end ~ *,
.float-start ~ *{
  #utility .bfc;
}
